<template>
    <div>
           <h1>Vue语法------指令</h1>
           <!--<h2 v-for="(item,index) in arr":key="index"></h2>-->
           <table border="1">
               <tbody>
                  <tr>
                      <td>酒店名称</td>
                      <td>酒店电话</td>
                      <td>酒店地址</td>
                      <td>酒店特色</td>                     
                      <td>操作</td>
                  </tr>
                  <tr v-for="item in stus":key="item.id">
                          <td>{{ item.id }}</td>
                           <td>{{ item.ShopName }}</td>
                            <td>{{ item.Phone }}</td>
                            <td>{{ item.Address }}</td>
                             <td>{{ item.TeSeName }}</td>
                             <td>
                               <img :src="item.src" style="width: 40px; height: 50px;">
                             </td>
                              <td>{{ item.CreateTime.substring(0,10) }}</td>
                                <td><input type="button" value="修改"></td>
                  </tr>
               </tbody>
           </table>

        <select>
            <option value="">请选择</option>
            <option value="" v-for="item in citys" :key="item.id">{{ item.name }}</option>
           </select>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
//声明一个数组
let arr=ref([1,34,34,3234]);
let data=reactive({
    arr:[12,232,323,2,32]
})
let stus=ref([
        {id:1,ShopName:"北京如家酒店",Phone:18888888888,src:"https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",Address:"北京昌平202",TeSeName:"豪华婚宴",CreateTime:'2022-09-20'},
        {id:2,ShopName:"北京汉庭酒店",Phone:18899998888,src:"https://img0.baidu.com/it/u=385906721,3322194213&fm=253&fmt=auto&app=120&f=JPEG?w=570&h=380",Address:"北京昌平201",TeSeName:"豪华婚宴",CreateTime:'2024-1-20'},
        {id:3,ShopName:"北京花儿顿酒店",Phone:188777888866,src:"https://img2.baidu.com/it/u=2116884723,4094686271&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400",Address:"北京昌平208",TeSeName:"豪华婚宴",CreateTime:'2021-12-20'}
])
let citys=ref([
  {id:1,name:'北京'},
  {id:2,name:'天津'},
  {id:3,name:'上海'},
  {id:4,name:'河北'},
  {id:5,name:'山西'},
  {id:6,name:'山东'},
])
</script>

<style scoped>

</style>